<template>
	<!-- 委外出、入或零件终检 -->
	<div>
		<!-- 检验信息对话框 -->
		<v-dialog v-if="checkModel!=null" v-model="checkInfo.checkDetailListDialog" persistent max-width="1000px">
			<v-card>
				<v-card-title>
					<span class="text-h5">{{titleText}}</span>
				</v-card-title>
				<v-card-text>
					<v-container>
						<v-expansion-panels>
							<v-expansion-panel>
								<v-expansion-panel-header>
									工单：<a>{{checkModel.childrenOrder.code}}</a> <a
										@click="showPrintQADialog">打印当前{{titleText}}</a>检验记录
								</v-expansion-panel-header>
								<v-expansion-panel-content>
									<v-data-table :headers="checkModelHeaderList"
										:items="checkModel.outsourcingDetailList" small fixed-header item-key="id"
										hide-default-footer dense class="text-no-wrap">
										<template v-slot:item.sharpcornersburr="{ item }">
											<a v-if="item.sharpcornersburr==1" style="color: #67C23A;">有</a>
											<a v-else>无</a>
										</template>
									</v-data-table>
								</v-expansion-panel-content>
							</v-expansion-panel>
						</v-expansion-panels>
						<br />
						<v-divider></v-divider>
						<v-row>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图号" disabled v-model="checkDetailModel.piccode">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="名称" disabled v-model="checkDetailModel.name">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="数量" :rules="qtyRule" v-model="checkDetailModel.qty">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize1">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize2">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize3">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize4">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize5">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize6">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize7">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="图标/实测" v-model="checkDetailModel.iconmeasuredsize8">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="合格数" :rules="qtyRule" v-model="checkDetailModel.okcount">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="返修数" :rules="qtyRule" v-model="checkDetailModel.backrepircount">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field label="废品数" :rules="qtyRule" v-model="checkDetailModel.wastecount">
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-checkbox label="尖角毛刺" v-model="checkDetailModel.sharpcornersburr">
								</v-checkbox>
							</v-col>
							<v-col cols="12">
								<v-textarea outlined name="input-7-4" label="备注" v-model="checkDetailModel.description"
									:value="checkDetailModel.description">
								</v-textarea>
							</v-col>
						</v-row>
					</v-container>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="blue darken-1" text @click="addCheckDetailSubmit">
						添加
					</v-btn>
					<v-btn color="blue darken-1" text @click="checkInfo.checkDetailListDialog=false">
						关闭
					</v-btn>
					<v-btn color="success darken-1" text @click="inStorageDialog=true">
						检验完成
					</v-btn>

				</v-card-actions>
			</v-card>
		</v-dialog>

		<v-dialog v-model="inStorageDialog" width="500">
			<v-card>
				<v-card-title>维护入库相关信息</v-card-title>
				<v-card-text>
					<v-select label="选择入库仓库" dense outlined v-model="warehouse" :items="storageInfoList">
					</v-select>
					<v-select label="选择入库类型" dense outlined v-model="inStorageType" :items="inStorageTypeList">
					</v-select>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="blue darken-1" class="ml-4" tile dark @click="completeCheck">
						确定
					</v-btn>
					<v-btn color="blue darken-1" class="ml-4" tile dark @click="inStorageDialog=false">
						关闭
					</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>

		<!-- 打印检验报告单对话框 -->
		<v-dialog v-if="printHeaderList.length>0" v-model="printQADialog" persistent max-width="1300px">
			<v-card>
				<v-card-title></v-card-title>
				<v-card-text>

					<div class="dayin">
						<div ref="print" id="printOutEnd">
							<table class="tab">
								<tbody class="top-tbody">
									<tr class="tr-head" style="height:25px;border-bottom:1px solid #000;">
										<td style="font-weight:bold; text-align:center;" colspan="8">委外检验报告单</td>
									</tr>
									<tr style="height:25px;">
										<td style="width:95px;font-weight:bold">项目号</td>
										<td style="width:280px;text-align: center;">
											{{printHeaderList[0].projectcode}}
										</td>
										<td style="width:95px;font-weight:bold">项目名称</td>
										<td style="width:95px;font-weight:bold;text-align: center;">
											{{printHeaderList[0].projectname}}
										</td>
										<td style="width:95px;font-weight:bold">加工商</td>
										<td style="width:95px;font-weight:bold;text-align: center;">
											{{printHeaderList[0].suppliername}}
										</td>
										<td style="width:95px;font-weight:bold">日期</td>
										<td style="width:95px;font-weight:bold;text-align: center;">
											{{printHeaderList[0].checkdate|dateFormat}}
										</td>
									</tr>
								</tbody>
							</table>
							<table class="tab" style="border-top:none;">
								<tbody class="bottom-tbody">
									<tr class="tr-head" style="height:25px;border-bottom:1px solid #000;">
										<td style="font-weight:bold; text-align:center;" colspan="16">详细信息</td>
									</tr>

									<tr class="tr-head" style="height:25px;">
										<td class="td-bold td-center column-1">图号</td>
										<td class="td-bold td-center column-2">名称</td>
										<td class="td-bold td-center column-3">件数</td>
										<td class="td-bold td-center column-4">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">尖角毛刺</td>
										<td class="td-bold td-center column-5">合格数</td>
										<td class="td-bold td-center column-5">返修数</td>
										<td class="td-bold td-center column-5">报废数</td>
										<td class="td-bold td-center column-5">备注</td>
									</tr>
									<tr v-for="detail in printAllOutDetailList" :key="detail.id" class="tr-body"
										style="height:25px;">
										<td class="td-body-color td-center column-1 column-body-1">
											{{detail.piccode}}
										</td>
										<td class="td-body-color td-center column-2 column-body-2">
											{{detail.name}}
										</td>
										<td class="td-body-color td-center column-3 column-body-3">
											{{detail.qty}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize1}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize2}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize3}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize4}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize5}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize6}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize7}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize8}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.sharpcornersburr==1?'有':'无'}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.okcount}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.backrepircount}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.wastecount}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.description}}
										</td>
									</tr>
									</tr>
								</tbody>
							</table>
							<v-row class="mt-5">
								<v-col cols="3"></v-col>
								<v-col cols="3">加工方质检人:</v-col>
								<v-col cols="3"></v-col>
								<v-col cols="3">签收:</v-col>
							</v-row>
						</div>
					</div>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<div class="no-print">
						<v-btn color="primary" text @click="printContext">打印</v-btn>
						<v-btn color="primary" text @click="printQADialog=false">关闭</v-btn>
					</div>
				</v-card-actions>
			</v-card>
		</v-dialog>

	</div>
</template>

<script>
	import print from 'print-js'
	export default {
		name: 'out_end_check',
		props: {
			callBackLoadProcessCards: {
				type: Function, //参数类型：函数
			},
			checkInfo: {
				checkDetailListDialog: false,
				childrencode: null,
				qaType: 0,
				controllerName: '',
				checkId: 0
			},
		},
		data: () => ({
			checkModel: null,
			checkModelHeaderList: [],
			checkDetailModel: {},
			titleText: '',
			qtyRule: [
				v => /^[0-9]*$/.test(v) || '请输入合法数字',
				v => v >= 0 || '需求量不能小于0'
			],
			printQADialog: false,
			printHeaderList: [],
			printAllOutDetailList: [],
			inStorageDialog: false,
			storageInfoList: [],
			inStorageTypeList: [],
			warehouse: null,
			inStorageType: "12",
		}),

		watch: {
			checkInfo: {
				handler(newVal) {
					this.$emit('update:checkInfo', newVal)
					if (this.checkInfo.qaType == 30) {
						this.titleText = '委外入检验'
					}
					if (this.checkInfo.qaType == 40) {
						this.titleText = '委外出检验'
					}
					if (this.checkInfo.qaType == 50) {
						this.titleText = '零件终检'
					}
					this.loadCheckDetailList()
					this.loadStorageList()
					this.loadSyncGetOutRdtype()
				},
				deep: true
			},
		},
		methods: {
			//加载仓库信息
			async loadStorageList() {
				const response = await this.$httpRequest({
					url: `MES/${this.checkInfo.controllerName}/GetStorageList`,
					method: 'get'
				})

				if (response.status == 1) {
					this.storageInfoList = response.data
				}
			},
			//加载入库类型
			async loadSyncGetOutRdtype() {
				const response = await this.$httpRequest({
					url: `MES/${this.checkInfo.controllerName}/SyncGetRdtype`,
					method: 'get'
				})

				if (response.status == 1) {
					this.inStorageTypeList = response.data
				}
			},

			async loadCheckDetailList() {
				if (!this.checkInfo.checkDetailListDialog)
					return

				var response = await this.$httpRequest({
					url: `MES/${this.checkInfo.controllerName}/LoadPartCheckList?
					childrenCode=${this.checkInfo.childrencode}&
					type=${this.checkInfo.qaType}&
					checkId=${this.checkInfo.checkId}&
					pageNumber=1&
					pageSize=100
					`,
					method: 'get',
				})

				if (response.status == 1) {
					if (response.data.data.result.length <= 0) {
						this.$message.error('未找到检验信息！');
						return
					}
					this.checkModel = response.data.data.result[0]

					this.checkModelHeaderList = response.data.childrenHeaders
					this.checkDetailModel = {}
					this.checkDetailModel.outsourcingid = this.checkModel.id
					this.checkDetailModel.name = this.checkModel.woutname
					if (this.checkModel.childrenOrder != null)
						this.checkDetailModel.piccode = this.checkModel.childrenOrder.piccode
					this.checkDetailModel.isexception = false
					this.checkDetailModel.status = null
				} else {
					this.$message.error(response.info)
				}
			},
			//添加明细
			async addCheckDetailSubmit() {
				var detailList = []
				detailList.push(this.checkDetailModel)
				var response = await this.$httpRequest({
					url: `MES/${this.checkInfo.controllerName}/AddPartCheckDetailList`,
					method: 'post',
					data: detailList
				})

				if (response.status == 1) {
					this.$message.success(response.info)
					this.resfercheckDetailModel()
					this.loadCheckDetailList()
				} else {
					this.$message.error(response.info)
				}
			},
			//检测完成
			async completeCheck() {
				if (this.checkModel == null) {
					this.$message.error('系统错误！')
					return
				}


				var response = await this.$httpRequest({
					url: `MES/${this.checkInfo.controllerName}/CompletePartCheck?
					partcheckId=${this.checkModel.id}&wareHouse=${this.warehouse}&inStorgeType=${this.inStorageType}
					`,
					method: 'get',
				})

				if (response.status == 1) {
					this.$message.success(response.info)
					this.inStorageDialog = false
					this.checkInfo.checkDetailListDialog = false
					//重新加载工作中心的流程卡信息
					this.$props.callBackLoadProcessCards()
				} else {
					this.$message.error(response.info)
				}
			},
			resfercheckDetailModel() {
				this.checkDetailModel.qty = 0
				this.checkDetailModel.iconmeasuredsize1 = null
				this.checkDetailModel.iconmeasuredsize2 = null
				this.checkDetailModel.iconmeasuredsize3 = null
				this.checkDetailModel.iconmeasuredsize4 = null
				this.checkDetailModel.iconmeasuredsize5 = null
				this.checkDetailModel.iconmeasuredsize6 = null
				this.checkDetailModel.iconmeasuredsize7 = null
				this.checkDetailModel.iconmeasuredsize8 = null
				this.checkDetailModel.okcount = 0
				this.checkDetailModel.backrepircount = 0
				this.checkDetailModel.wastecount = 0
				this.checkDetailModel.sharpcornersburr = 0
				this.checkDetailModel.description = null
			},
			//打开打印对话框
			showPrintQADialog() {
				this.printQADialog = true
				this.printHeaderList = []
				if (this.checkModel != null && this.checkModel.outsourcingDetailList != null)
					this.printHeaderList.push(this.checkModel)
				this.printAllOutDetailList = []
				this.printAllOutDetailList = this.checkModel.outsourcingDetailList
			},
			printContext() {
				printJS({
					printable: 'printOutEnd',
					type: 'html',
					targetStyles: ['*'],
					ignoreElements: ['no-print'],
				})
			},
		}
	}
</script>
<style scoped>
	.main {
		background: #aaf5aa;
	}

	.dayin {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		@media print {
			text-align: center;
			width: 100%;
			margin: auto;
			page-break-after: always;
			margin-top: 20px;
			font-family: "微软雅黑";
		}



		#printOutEnd {
			text-align: center;

			.content {}

			.btn {}
		}
	}


	.tab {
		table-layout: fixed;
		width: 1200px;
		border-left: 1px solid #000;
		border-top: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 0px;

		.top-tbody {}

		.bottom-tbody {
			.column-1 {
				width: 50px;
			}

			.column-2 {
				width: 180px;
			}

			.column-3 {
				width: 160px;
			}

			.column-4 {
				width: 120px;
			}

			.column-5 {
				width: 150px;
			}

			.column-body-1 {}

			.column-body-2 {}

			.column-body-3 {}

			.column-body-4 {}

			.column-body-5 {}
		}

		.tr-head {
			height: 25px;
		}

		.tr-body {}

		.td-bold {
			font-weight: bold;
		}

		.td-center {
			text-align: center;
		}

		.td-left {
			text-align: left;
		}

		.td-body-color {
			color: black;
		}
	}

	.Result0 {}

	.Result1 {
		color: gray;
	}

	.tab td {
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 1px;
	}
</style>
